slider: Reverse handle direction in RTL

Rework slider handle to reverse directions when the slider is
Right-to-Left.

Fixes: https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/5107
Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2943>

diff --git a/js/ui/slider.js b/js/ui/slider.js
index 410fc5013fb41e0d80a09c034d4f9837b744da1a..42f464b71fb1b3ac0a0c70635c42a78243dda7dd 100644 (file)
--- a/js/ui/slider.js
+++ b/js/ui/slider.js
@@ -37,6 +37,7 @@ export const Slider = GObject.registerClass({
         let cr = this.get_context();
         let themeNode = this.get_theme_node();
         let [width, height] = this.get_surface_size();
+        const rtl = this.get_text_direction() === Clutter.TextDirection.RTL;
 
         let handleRadius = themeNode.get_length('-slider-handle-radius');
 
@@ -45,10 +46,13 @@ export const Slider = GObject.registerClass({
             themeNode.lookup_color('-slider-handle-border-color', false);
 
         const ceiledHandleRadius = Math.ceil(handleRadius + handleBorderWidth);
-        const handleX = ceiledHandleRadius +
-            (width - 2 * ceiledHandleRadius) * this._value / this._maxValue;
         const handleY = height / 2;
 
+        let handleX = ceiledHandleRadius +
+            (width - 2 * ceiledHandleRadius) * this._value / this._maxValue;
+        if (rtl)
+            handleX = width - handleX;
+
         let color = themeNode.get_foreground_color();
         Clutter.cairo_set_source_color(cr, color);
         cr.arc(handleX, handleY, handleRadius, 0, 2 * Math.PI);
@@ -189,9 +193,13 @@ export const Slider = GObject.registerClass({
     _moveHandle(absX, _absY) {
         let relX, sliderX;
         [sliderX] = this.get_transformed_position();
+        const rtl = this.get_text_direction() === Clutter.TextDirection.RTL;
+        let width = this._barLevelWidth;
+
         relX = absX - sliderX;
+        if (rtl)
+            relX = width - relX;
 
-        let width = this._barLevelWidth;
         let handleRadius = this.get_theme_node().get_length('-slider-handle-radius');
 
         let newvalue;